<template>
  <el-dialog
    :title="layerTitle"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="140px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="证件类型" prop="regTypeCode">
            <dictionary-select dictType="reg_type" :dictionaryCode.sync="dataForm.regTypeCode" :dictionaryName.sync="dataForm.regTypeName"></dictionary-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册证号" prop="regNo">
            <el-input v-model="dataForm.regNo" placeholder="注册证号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="注册产品名称" prop="regGoodsName">
            <el-input v-model="dataForm.regGoodsName" placeholder="注册产品名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产企业" prop="facName">
            <el-select v-model="dataForm.facCode" @change="changeList" placeholder="生产企业" style="width: 100%">
              <el-option
                v-for="item in options"
                :key="item.orgCode"
                :label="item.orgName"
                :value="item.orgCode"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业注册地址" prop="facRegAddr">
            <el-input v-model="dataForm.facRegAddr" placeholder="企业注册地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="企业生产地址" prop="facProduceAddr">
            <el-input v-model="dataForm.facProduceAddr" placeholder="企业生产地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="型号规格" prop="goodsModel">
            <el-input v-model="dataForm.goodsModel" placeholder="型号规格"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品标准" prop="productStandards">
            <el-input v-model="dataForm.productStandards" placeholder="产品标准"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="代理人" prop="productAgent">
            <el-input v-model="dataForm.productAgent" placeholder="代理人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="售后服务机构" prop="productServiceAgent">
            <el-input v-model="dataForm.productServiceAgent" placeholder="售后服务机构"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营方式" prop="operateType">
            <el-input v-model="dataForm.operateType" placeholder="经营方式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="法人" prop="legalName">
            <el-input v-model="dataForm.legalName" placeholder="法人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人" prop="principalName">
            <el-input v-model="dataForm.principalName" placeholder="负责人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="住所" prop="perAddr">
            <el-input v-model="dataForm.perAddr" placeholder="住所"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="经营场所" prop="businessAddr">
            <el-input v-model="dataForm.businessAddr" placeholder="经营场所"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="库房地址" prop="warehouseAddr">
            <el-input v-model="dataForm.warehouseAddr" placeholder="库房地址"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期开始日期" prop="beginDate">
            <el-date-picker
              clear-icon
              v-model="dataForm.beginDate"
              type="date"
              format="yyyy-MM-dd"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间">
            </el-date-picker >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期结束日期" prop="endDate">
            <el-date-picker
              clear-icon
              v-model="dataForm.endDate"
              type="date"
              format="yyyy-MM-dd"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间">
            </el-date-picker >
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证部门" prop="regOrg">
            <el-input v-model="dataForm.regOrg" placeholder="发证部门"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发证日期" prop="regDate">
            <el-date-picker
              clear-icon
              v-model="dataForm.regDate"
              type="date"
              format="yyyy-MM-dd"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择日期时间">
            </el-date-picker >
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="产品性能结构及组成" prop="productPerformance">
        <el-input type="textarea" v-model="dataForm.productPerformance" placeholder="产品性能结构及组成"></el-input>
      </el-form-item>
      <el-form-item label="产品适用范围" prop="productIndications">
        <el-input type="textarea" v-model="dataForm.productIndications" placeholder="产品适用范围"></el-input>
      </el-form-item>
      <el-form-item label="产品禁忌症" prop="productContraindications">
        <el-input type="textarea" v-model="dataForm.productContraindications" placeholder="产品禁忌症"></el-input>
      </el-form-item>
      <el-form-item label="国家标准分类" prop="regScope">
        <el-input type="textarea" v-model="dataForm.regScope" placeholder="国家标准分类"></el-input>
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks">
        <el-input type="textarea" v-model="dataForm.remarks" placeholder="备注信息"></el-input>
      </el-form-item>
      <el-form-item label="图片上传" prop="picUpload">
        <el-input type="textarea" v-model="dataForm.picUpload" placeholder="图片上传"></el-input>
      </el-form-item>
    </el-form>
    <div v-if="isShowHistory">
      <el-table
        border
        :data="historyList"
        max-height="200"
        style="width: 100%">
        <el-table-column
          label="证号"
          width="180">
          <template slot-scope="scope">
            <a style="color: #00a0e9;cursor: pointer" @click="checkLic(scope.row)">{{ scope.row.regNo }}</a>
          </template>
        </el-table-column>
        <el-table-column
          prop="beginDate"
          label="有效期开始日期"
          width="180">
        </el-table-column>
        <el-table-column
          label="有效期截止日期"
          prop="endDate"
          width="180">
          <template slot-scope="scope">
            {{ scope.row.endDate ? scope.row.endDate : '永久' }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button class="fl" @click="showHistory" v-if="showHisLic">查看历史证件</el-button>
      <el-button @click="changeCertificate" type="info" v-if="flag">换证</el-button>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  import DictionarySelect from '@/components/common/dictionary-select'
  const defaultForm = {
    regCode: '',
    regNo: '',
    regTypeCode: '',
    regTypeName: '',
    facCode: '',
    facName: '',
    facRegAddr: '',
    facProduceAddr: '',
    regGoodsName: '',
    goodsModel: '',
    productStandards: '',
    productPerformance: '',
    productIndications: '',
    productContraindications: '',
    productAgent: '',
    productServiceAgent: '',
    regScope: '',
    operateType: '',
    legalName: '',
    principalName: '',
    perAddr: '',
    businessAddr: '',
    warehouseAddr: '',
    beginDate: '',
    endDate: '',
    flag: '',
    regOrg: '',
    regDate: '',
    status: '',
    createUserId: '',
    createBy: '',
    createDate: '',
    updateUserId: '',
    updateBy: '',
    updateDate: '',
    remarks: ''
  }
  export default {
    data () {
      return {
        options: [], // 生产企业列表
        visible: false,
        layerTitle: '', // 弹出框标题
        flag: false,
        showHisLic: false,
        isShowHistory: false,
        dataForm: {},
        idAdd: false,
        parentForm: {},
        historyList: [],
        dataRule: {
          regTypeCode: [
            { required: true, message: '证件类型不能为空', trigger: 'blur' }
          ],
          regNo: [
            { required: true, message: '注册证号不能为空', trigger: 'blur' }
          ],
          regGoodsName: [
            { required: true, message: '注册产品名称不能为空', trigger: 'blur' }
          ],
          facName: [
            { required: true, message: '生产企业不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    components: {
      DictionarySelect
    },
    methods: {
      // 切换历史证件
      checkLic (row) {
        this.isShowHistory = false
        this.getLicDetail(row)
      },
      // 获取证件详情
      getLicDetail (row) {
        this.isAdd = false
        this.$http({
          url: this.$http.adornUrl(`${this.$API.BASE_INFO.GOODSREG.INFO}/${row.regCode}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then((data) => {
          if (data.goodsReg) {
            this.dataForm = data.goodsReg
            console.log(this.dataForm)
          }
        })
      },
      // 查看历史证件列表
      showHistory () {
        this.isShowHistory = !this.isShowHistory
        this.$http({
          url: this.$http.adornUrl(`${this.$API.BASE_INFO.GOODSREG.HISTORY}/${this.parentForm.regCode}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({data}) => {
          this.historyList = data
        })
      },
      // 换证
      changeCertificate () {
        if (this.dataForm.regCode) {
          const data = {
            parentId: this.dataForm.regCode
          }
          this.dataForm = Object.assign(data, defaultForm)
        }
        this.layerTitle = '换证'
        this.isAdd = true
      },
      init (row) {
        this.visible = true
        this.parentForm = row
        this.isShowHistory = false
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (row) {
            this.layerTitle = '编辑'
            this.$http({
              url: this.$http.adornUrl(`${this.$API.BASE_INFO.GOODSREG.INFO}/${row.regCode}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then((data) => {
              this.dataForm = data.goodsReg
              if (data.goodsReg.changeFlag === '0') {
                this.flag = true
              } else {
                this.flag = false
              }
              this.isAdd = false
              this.showHisLic = true
            })
          } else {
            this.layerTitle = '新增'
            this.dataForm = Object.assign(defaultForm)
            this.isAdd = true
            this.dataForm.facCode = ''
            this.flag = false
            this.showHisLic = false
          }
          this.facNameSub()
        })
      },
      // 生产企业接口
      facNameSub () {
        this.$http({
          url: this.$http.adornUrl(`${this.$API.BASE_INFO.FACTORY_INFO.LIST}`),
          method: 'get',
          params: this.$http.adornParams({
            'page': 1,
            'limit': 30,
            'orgCode ': this.dataForm.facCode
          })
        }).then(({data}) => {
          this.options = data.list
        })
      },
      // 生产企业改变list
      changeList (code) {
        const row = this.options.filter(item => item.orgCode === code)
        this.dataForm.facName = row[0].orgName
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (this.layerTitle !== '新增') {
            this.dataForm.regCode = this.parentForm.regCode
          }
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`${this.isAdd ? this.$API.BASE_INFO.GOODSREG.SAVE : this.$API.BASE_INFO.GOODSREG.UPDATE}`),
              method: 'post',
              data: this.$http.adornData(this.dataForm)
            }).then((data) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
